<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>MediaStream</title>

	<style type="text/css">
		
		.grayscale {
		  filter: grayscale(100%);
		}

		/* 定义模糊特效 */
		.blur {
		  filter: blur(5px);
		}

		/* 定义对比度调整特效 */
		.contrast {
		  filter: contrast(200%);
		}

		/* 定义亮度调整特效 */
		.brightness {
		  filter: brightness(150%);
		}

		/* 定义色相旋转特效 */
		.hue-rotate {
		  filter: hue-rotate(90deg);
		}

		/* 定义反色特效 */
		.invert {
		  filter: invert(100%);
		}

		/* 定义饱和度调整特效 */
		.saturate {
		  filter: saturate(200%);
		}

		/* 定义阴影特效 */
		.shadow {
		  filter: drop-shadow(4px 4px 10px rgba(0,0,0,0.5));
		}


	</style>
</head>
<body>
	<div>
		<select id="filter">
		<option value="none">None</option>
		<option value="grayscale">grayscale</option>
		<option value="blur">blur</option>
		<option value="contrast">contrast</option>
		<option value="brightness">brightness</option>
		<option value="rotate">rotate</option>
		<option value="shadow">brightness</option>
		<option value="invert">invert</option>
		<option value="saturate">saturate</option>
	
	</select>
	</div>
	
	<div>
		<video id="player" autoplay playsinline style="width:300;height: 300;"></video>
	</div>


</body>

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>


<script>
	
'use strict'

//获取video标签

var videoplay = document.querySelector("video#player")

var filterSelect = document.querySelector("select#filter")

//视频约束
var constraints = {
	video:{
		width:{ideal:640},
		height:{ideal:640},
		frameRate:15,
		facingMode:"enviroment"
	},
	audio:{
		noiseSuppression:true,
		echoCancellation:true
	}
}


if (!navigator.mediaDevices || 
	!navigator.mediaDevices.getUserMedia) {
	console.log('getUserMedia is not supported!');
}else{
	navigator.mediaDevices.getUserMedia(constraints)
	.then((stream)=>{
		//stream中包含了视频轨和音频轨
		videoplay.srcObject=stream

	})
	.catch((error)=>{

		console.log('getUserMedia error:', error)
	});
}

filterSelect.onchange=()=>{
	videoplay.className = filterSelect.value
}


</script>
</html>